<template>
  <div style="width: 400px;height: 350px;margin: 0 auto;border-radius: 10px;border: 5px solid #aedac9; ">

    <h1 style="color: #42b983;">计算器</h1>
    <br>
    <br>
    <br>
    <div class="jjia">
      <h2 style="color: #42b983;margin-right: 10px">进价</h2>
      <el-input v-model="price"
                oninput="value= value.match(/\d+(\.\d{0,5})?/) ? value.match(/\d+(\.\d{0,5})?/)[0] : ''"
                style="width: 250px"
                clearable
      ></el-input>

      <h2 style="color: #42b983;margin-right: 10px">元/g</h2>
    </div>
    <br>
    <br>
    <div class="jjia">
      <h2 style="color: #42b983;margin-right: 10px">售价</h2>
      <el-input v-model="newPrice" style="width: 250px"></el-input>
      <h2 style="color: #42b983;margin-right: 10px">元/g</h2>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: "",
      newPrice: "",
      lastPrice: ""
    }
  },
  name: 'HelloWorld',
  props: {
    msg: String
  },
  //监听price的值变化的时候发生变化
  watch: {
    price() {
      this.lastPrice = this.price * 1000;
      this.changePrice();
    }
  },

  methods: {
    changePrice() {
      if (this.lastPrice > 0 && this.lastPrice <= 10) {
        this.newPrice = this.price * 8;
      } else if (this.lastPrice > 10 && this.lastPrice <= 20) {
        this.newPrice = this.price * 7;
      } else if (this.lastPrice > 20 && this.lastPrice <= 30) {
        this.newPrice = this.price * 6;
      } else if (this.lastPrice > 30 && this.lastPrice <= 60) {
        this.newPrice = this.price * 5;
      } else if (this.lastPrice > 60 && this.lastPrice <= 100) {
        this.newPrice = this.price * 4;
      } else {
        this.newPrice = this.price * 3;
      }
      this.newPrice = this.newPrice.toFixed(5)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.colored-div {
  background-color: #d917b4; /* 红色背景 */
}

h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

.jjia {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
